<template>
    <div class="box">
        <div class="title center">《信息技术》子任务4学情分析</div>
        <div class="chartShow">
            <div class="chart">
                <ChartShow name="课前测试完成情况" :option="option1" />
            </div>
            <div class="chart">
                <ChartShow name="课前测试准确率" :option="option2" />
            </div>
            <div class="chart">
                <ChartShow name="AI鞋履定制基本概念了解情况" :option="option3" />
            </div>
            <div class="chart">
                <ChartShow name="AI鞋履定制技能掌握情况" :option="option4" />
            </div>
        </div>
    </div>
</template>

<script setup>
import ChartShow from '@/components/ChartShow.vue'
const option1 = {
    tooltip: {},
    legend: {
        data: ['已完成', '未完成'],
        textStyle: {
            color: 'white',
        },
    },
    series: [
        {
            type: 'pie',
            radius: '70%',
            data: [
                { value: 1, name: '已完成' },
                { value: 0, name: '未完成' },
            ],
            label: {
                fontSize: 18,
                fontWeight: "bold",
                formatter: "{b}:{d}%",
                color: "rgb(255, 255, 255)",
            },
        },
    ]
};

const option2 = {
    xAxis: [{
        data: ["任务1", "任务2", "任务3.1", "任务3.2", "任务3.3", "任务3.4"],
        axisLabel: {
            textStyle: {
                fontSize: '15',
                color: 'white'
            }
        }
    }],
    yAxis: {
        type: 'value',
        max: 88,
        min: 70,
        axisLabel: {
            textStyle: {
                fontSize: '15',
                color: 'white'
            },
            formatter: '{value}%',
        },
        splitNumber: 10  // 设置 y 轴分段数，默认值是 3


    },
    series: [
        {
            type: 'line',
            data: [75.8, 79.6, 80.8, 82.7, 83.2, 85.8],
            label: {
                show: true,
                position: 'top',
                color: 'white',
                formatter: '{c}%',
                fontSize: 25
            },
            colorBy: 'data',
        }
    ]

}
const option3 = {
    // title: {
    //     text: 'AI鞋履定制基本概念了解情况',
    //     textStyle: {
    //         color: 'white'
    //     }
    // },
    yAxis: {
        min: 88,
        max: 94,
        axisLabel: {
            textStyle: {
                fontSize: '15',
                color: 'white'
            }
        }
    },
    xAxis: {
        data: ["大数据分析流程", "AIGC基本概念", "图像分类原理"],
        axisLabel: {
            textStyle: {
                fontSize: '15',
                color: 'white'
            }
        }
    },
    series: [{
        type: 'bar',
        data: [92, 93, 90],
        label: {
            show: true,
            position: 'top',
            color: 'white',
            fontSize: 25
        },
        colorBy: 'data',
    }]

}
const option4 = {
    // title:{
    //     text:'AI鞋履定制技能掌握情况',
    //     textStyle:{
    //         color:'white'
    //     }
    // },
    yAxis: { 
        data: ["鞋楦推荐工具应用", "AIGC生成设计图", "趋势预测"],
        axisLabel: {
            textStyle: {
                fontSize: '15',
                color: 'white',
            },
            width: 70,
            overflow: "break",
        }
    },
    xAxis: {
        min: 80,
        max: 90,
        splitNumber: 10,
        axisLabel: {
            textStyle: {
                fontSize: '25',
                color: 'white'
            }
        },

    },
    series: [{
        type: 'bar',
        data: [86, 83, 88],
        label: {
            show: true,
            position: 'right',
            color: 'white',
            fontSize: 25
        },
        colorBy: 'data',
    }]

}

</script>

<style lang="scss" scoped>
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    width: 100%;
    height: 100%;
    background-color: #2d4351;
    color: rgb(255, 255, 255);


    .chartShow { 
        width: 100%;
        padding: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: start;

        .chart {
            width: 45%;
            height: 580px;
            margin: 10px;

            div {
                background-color: #324374;
                box-shadow: 0 0 10px rgb(34, 31, 38);
            }
        }
    }
}

.title {
    width: 90%;
    font-size: 40px;
    background-color: rgb(129, 66, 158);
    border-radius: 10px;
    margin: 10px auto;
    padding: 10px;
}
</style>